<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>飞机大战1.0</title>
		<style type="text/css">
			#container{
				border: 1px solid black;
				width: 512px;
				height: 500px;
				overflow: hidden;
				position: absolute;
			}
			#map{
				position: absolute;
				z-index: 1;
				top: 0px;
			}
			#myplane{
				position: absolute;
				z-index: 2;
				left: 203px;
				top: 424px;
				
			}
		</style>
	</head>
	<body>
		<div id="container">
			<img src="http://144.168.62.173/images/bg1.PNG" id="map"/>
			<img src="http://144.168.62.173/images/me.png" id="myplane"/>
		</div>
		
		<script type="text/javascript">
			var m=document.getElementById("map");
			var rollY=0;
			function roll(){
				rollY -=5;
				//console.log(m.offsetTop);
				//console.log(m.height);
				m.style.top =rollY+"px";
				if((rollY+m.height-500)<=0)
				{
					rollY=0;
				}
			}
			//地图滚起来
			setInterval("roll()",50);
			
			//设置飞机一次偏移量
			var offset=10;
			var myplane = document.getElementById("myplane");
			//添加键盘事件
			window.document.onkeydown=function(ent){ 
				//兼容ie
				var event = ent || window.event;
				//获取键盘值
				console.log(event.keyCode);
				//console.log(m.width,m.height,myplane.width,myplane.height);
				switch(event.keyCode){ 
					case 37://左
					myplane.style.left=Math.max(0,(myplane.offsetLeft-offset))+"px";
					break;
					case 38://上
					myplane.style.top=Math.max(0,(myplane.offsetTop-offset))+"px";
					break;
					case 39://右
					myplane.style.left=Math.min((m.width-myplane.width),(myplane.offsetLeft+offset))+"px";
					break;
					case 40://下
					myplane.style.top=Math.min((500-myplane.height),(myplane.offsetTop+offset))+"px";
					break;
					default:
					break;
				}
			}
		</script>
	</body>
</html>
